<template>
  <div class="editor-container" id="quill_container">
    <el-upload id="quill-upload" class="avatar-uploader none" name="pic" :data="upload" :action="editorOption.serverUrl" :headers="editorOption.header"
      :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload">
    </el-upload>
    <quill-editor ref="vueQuillEditor" v-model="uecontent" :options="editorOption" @ready="onEditorReady($event)">
    </quill-editor>
  </div>
</template>

<script>
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import {
    quillEditor,
    Quill
  } from 'vue-quill-editor';
  const toolbaroptions = [
    ['bold', 'italic', 'underline', 'strike'],
    // ['blockquote','code-block'],
    [{
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }], //列表样式
    // [{'script': 'sub'},{'script': 'super'}], //标头、标尾
    [{
      'indent': '-1'
    }, {
      'indent': '+1'
    }], // 文本缩进
    // [{'direction': 'rtl'}], //文本自右边往左排列
    [{
      'size': ['small', false, 'large', 'huge']
    }], //文本大小
    [{'color': []},{'background': []}], //文本颜色及背景色
    // [{'font': []}], //文字类型
    [{
      'align': []
    }], //文本对齐方式
    ['image'], // 图片上传按钮
    ['clean'], //清除文本样式
  ]
  export default {
    name: 'editor',
    props: {
      content: String
    },
    computed: {
      uecontent: {
        get() {
          return this.content
        },
        set(val) {
          // console.log(val)
          this.getcontent(val)
        }
      },
    },
    data() {
      return {
        // uecontent: null,
        upload: {
          dir: 'IDcardsh'
        },
        editorOption: {
          placeholder: '您想说点什么？',
          theme: "snow", // or 'bubble'
          serverUrl: this.$api.common.upload, // 这里写你要上传的图片服务器地址
          header: {
            'access-token': localStorage.getItem('ms_token') || ''
          }, // 有的图片服务器要求请
          modules: {
            toolbar: {
              container: toolbaroptions, // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('#quill-upload input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
            // imageDrop: true,
            // imageResize: {}
          }
        },
      }
    },
    components: {
      quillEditor
    },
    mounted() {
      console.log(this.editorOption.serverUrl)
    },
    methods: {
      // 初始化富文本编辑器
      onEditorReady() {
        console.warn('editor ready!')
      },
      // 计算并获取富文本里面的内容
      getcontent(val) {
        this.$emit('getcontent', val)
      },
      beforeUpload() {
        // 显示loading动画
        this.quillUpdateImg = true
      },
      // 富文本图片上传前
      uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let quill = this.$refs.vueQuillEditor.quill
        // 如果上传成功
        if (res.status == 200) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', res.data)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
        // loading动画消失
        this.quillUpdateImg = false
      },

      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
      }
    }
  }

</script>
<style lang="scss">
  #quill_container {
    .editor {
      line-height: normal !important;
      height: 800px;
    }
    .ql-editor {
      min-height: 200px;
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: '14px';
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
      content: '10px';
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
      content: '18px';
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
      content: '32px';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: '文本';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: '标题1';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: '标题2';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: '标题3';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: '标题4';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: '标题5';
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: '标题6';
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: '标准字体';
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
      content: '衬线字体';
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
      content: '等宽字体';
    }
  }

</style>
